<!--
 * @Author: ZCL
 * @Date: 2020-05-18 14:17:47
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-18 14:17:47
-->
<template>
  <!-- 我报失的资产 详情编辑 -->
  <div class="myLost">
    <van-list
      v-if="myLossList.length"
      v-model="loading"
      :finished="!canLoadMore"
      finished-text="- 我是有底线的 -"
      @load="getMyLossRecord"
      :offset="num"
    >
      <div class="lost-box"
        v-for="(item,index) in myLossList"
        :key="index"
        @click="goLostDetail(item.f_id,item.id)"
      >
        <div class="left">
          <van-image
            width="85px"
            height="85px"
            :src="item.image_url"
          />
        </div>
        <div class="right ">
          <p class="text pb-10">{{ item.f_name }}</p>
          <p>编码：{{ item.f_code }} <span class="pl-10">型号: {{ item.f_name }}</span></p>
          <p class="pt-9 pb-9">单价: {{ item.f_unit_price }}</p>
          <p>报失人: {{ item.lo_user_name }} <span class="pl-10">报失时间: {{ item.create_time.split(' ')[0] }}</span></p>
        </div>
      </div>
    </van-list>
    <van-empty
      v-if="!myLossList.length"
      class="custom-image"
      :image="require('@/assets/icon/empty2.png')"
      description="暂无记录"
    />
  </div>
</template>

<script>
import titleMixins from '@/mixins/title';
import { EDIT_TYPES, COMMON_TYPES } from '@/constant';

export default {
  name: 'MyLost',
  mixins: [titleMixins],
  props: ['$type'],
  data () {
    return {
      EDIT_TYPES,
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      myLossList: [] // 我报失的资产列表
    };
  },
  methods: {
    // 前往资产报失详情
    goLostDetail (f_id, id) {
      this.$router.push({
        name: 'loss-form',
        query: {
          f_id,
          id,
          edit: EDIT_TYPES.DETAIL
        }
      });
    },
    // 获取我报失的资产
    getMyLossRecord () {
      this.loading = true;
      let params = {
        page: this.page,
        num: this.num
      };
      this.$api.getLossMyLossRecord(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.myLossList = [...this.myLossList, ...res.result.data];
          this.totalPage = Number(res.result.last_page);
          this.page++;
          if (this.page > this.totalPage) {
            this.canLoadMore = false;
          }
        }
      });
    },
    // 获取部门报失资产
    getDeptLossRecord () {
      this.loading = true;
      let params = {
        page: this.page,
        num: this.num,
        dept_id: this.$route.query.dept_id
      };
      this.$api.getLossLossRecord(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.myLossList = [...this.myLossList, ...res.result.data];
          this.totalPage = Number(res.result.last_page);
          this.page++;
          if (this.page > this.totalPage) {
            this.canLoadMore = false;
          }
        }
      });
    }
  },
  created () {
    if (this.$type === COMMON_TYPES.MY) {
      this.getMyLossRecord();// 获取我报失的资产
    } else if (this.$type === COMMON_TYPES.DEPARTMENT) {
      this.getDeptLossRecord();// 获取部门报失资产
    }
  }
};
</script>

<style lang="scss" scoped>
.myLost {
  background-color: #f8f9fd;
  padding-top: 10px;
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
  .lost-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
  }
  .left {
    // width: 85px;
    // height: 85px;
    // border-radius: 3px;
    // background-color: #F2F2F2;
    margin-right: 10px;
  }
  .right {
    font-size: 12px;
    color: #BBBBBB;
    .text {
      font-size: 14px;
      color: #020202;
      margin-left: 0 !important;
    }
  }
}
</style>
